import React, { useCallback } from "react";
import { useHistory } from "react-router-dom";
import style from "../style/permissionsnav.module.scss";
const Permissionsnav = (props) => {
  let history = useHistory();
  let switchAction = useCallback(
    (route) => {
      history.replace(`/permissions/${route}`, "");
    },
    [history]
  );
  let arr = [
    { id: 1, text: "角色管理", route: "rolemanage" },
    { id: 2, text: "部门管理", route: "departmentmanage" },
    { id: 3, text: "账号管理", route: "accountmanage" },
  ];
  return (
    <>
      <ul className={style.nav}>
        {arr.map((item) => (
          <li
            key={item.id}
            className={item.route === props.route ? style.active : ""}
            onClick={() => switchAction(item.route)}
          >
            {item.text}
          </li>
        ))}
      </ul>
    </>
  );
};

export default Permissionsnav;
